<template>
  <el-row class="mianclss">
    <el-col
      :span="24"
      class="showClass"
    >工单应{{paymentType==1?'退':'收'}}：<span class="mount">￥{{amount}}</span></el-col>
    <!-- <el-col
      :span="24"
      v-else
      class="inputClass"
    >
      <div class="inputTitle">
        预收金额：
      </div>
      <el-input
        size="small"
        v-model="inpuMont"
      ></el-input>
    </el-col> -->
    <el-col
      :span="24"
      class="ewmCalss"
    >
      <img
        :src="ewmUrl"
        alt=""
      >
      <div>该二维码有效期限剩余：{{tims}}s</div>
      <el-button
        type="text"
        size="mini"
        @click="refreshCode"
      >重新生二维码</el-button>
    </el-col>
    <el-col align="center">
      <el-button
        type="danger"
        size="mini"
        @click="cancel"
      >取消</el-button>
      <el-button
        type="success"
        size="mini"
        @click="paySuccess"
      >{{paymentType==1?'退款完成':'支付完成'}}</el-button>
    </el-col>
  </el-row>
</template>
<script>
import { getImageUrl } from '@/utils'
export default {
  props: {
    amount: {
      type: String | Number,
      default: 0,
    },
    baseUrl: {
      type: String,
      default: '',
    },
    //二位类型标识  1 退款  2收款
    paymentType: {
      type: String | Number,
      default: 1,
    }
  },
  watch: {
    baseUrl: function (nv, ov) {
      if (nv)
        this.ewmUrl = nv
    }
  },
  data () {
    return {
      tims: 300,
      ewmUrl: '',
    }
  },
  methods: {
    cancel () {
      this.$emit('cancel')
    },
    paySuccess () {
      this.$emit('paySuccess')
    },
    refreshCode () {
      this.tims = 300;
      this.$emit('refreshCode');
    }
  },
  created () {
    // this.test();
    this.ewmUrl = this.baseUrl;
    let timeHadle = setInterval(() => {
      if (this.tims == 0) {
        clearInterval(timeHadle)
      } else {
        this.tims--;
      }
    }, 1000);
  }
}
</script>
<style lang="scss" scoped>
.mianclss {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .showClass {
    display: flex;

    justify-content: center;
    align-items: center;
    .mount {
      color: #f40;
    }
  }
  .inputClass {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    .inputTitle {
      width: 100px;
      height: 40px;
      line-height: 40px;
    }
    .el-input {
      width: 200px;
    }
  }
  .ewmCalss {
    display: flex;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .el-button {
      margin-top: 10px;
    }
    img {
      width: 350px;
      height: 350px;
    }
  }
}
</style>